<template>
  <div class="header">
    <a href="/">
      <img class="logo" src="../../assets/logo.png" alt="" />
      <span class="title">梦学谷会员管理系统</span>
    </a>
    <el-dropdown @command="handleClick">
      <span class="el-dropdown-link">
        {{ username }}<i class="el-icon-arrow-down el-icon--right"></i>
      </span>
      <el-dropdown-menu slot="dropdown">
        <el-dropdown-item command="changePwd">修改密码</el-dropdown-item>
        <el-dropdown-item command="getOut">退出登录</el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown>
  </div>
</template>

<script>
import store from "../../store";
export default {
  data() {
    return {
      username: store.state.userInfo.name || "",
    };
  },
  mounted() {},
  methods: {
    handleClick(val) {
      switch (val) {
        case "changePwd":
          console.log("修改密码");
          break;
        case "getOut":
          this.getOut();
          break;
      }
    },
    getOut(){
        this.$store.dispatch('getOut').then(res=>{
            if(res.data.flag){
                this.$message.success(res.data.message)
                this.$router.push('/layout')
            }else{
                this.$message.error(res.data.message)
            }
        }).catch(error=>{   
            console.log(error);
        })
    }
  },
};
</script>

<style scoped lang="scss">
.logo {
  width: 25px;
  height: 25px;
  vertical-align: middle;
  padding-right: 20px;
}
.title {
  color: #fff;
  font-size: 16px;
  font-weight: bold;
  vertical-align: middle;
}
.el-dropdown {
  float: right;
  color: #fff;
}
</style>
